<template>
  <!-- 评论模块 -->
  <div class="comment-page">
    <div class="commentArea">
        <van-cell>
          <div class="commentInfo">
            <van-image
              :src="commentList.aut_photo"
              fit="cover"
              round=""
            />
            <span class="infoName">{{commentList.aut_name}}</span>
          </div>
          <template #right-icon>
            <div  class="fabulous" @click="clickFabulous">
                <van-icon name="good-job" v-if="commentList.is_liking" color="#ed3651" />
                <van-icon name="good-job-o"  v-else/>
               <i>{{commentList.like_count}}</i>
            </div>
          </template>
          <div class="textBox">
            <span class="text">{{commentList.content}}</span>
            <div class="commentDate">
              <span>{{commentList.pubdate | relativeTime}}</span>
              <van-button plain color="#333" round="" size="mini" @click="seeReply" >回复</van-button>
            </div>
          </div>
          
        </van-cell>
        
      </div>
     <div class="replyBox">
      <van-popup v-model="replyShow" position="bottom">
        <commentReply
        :commentList="commentList"
        @replyZangStatus="clickFabulous"
        @replyShow="replyShow = $event"
        />
      </van-popup>
      
     </div>
  </div>
</template>

<script>
import commentReply from './commentReply.vue'
import { postCommentLikings,deleteArticleComment } from '@/service/getDate'
export default {
  name: 'commentPage',
  data () {
    return {
      fabulousShow: false, // 点赞切换开关
      replyShow: false, // 回复弹层开关
      cList: [] , // 回复的数据
    }
  },
  created() {
    // this.clickFabulous()
  },
  components: {
    commentReply
  },
  props: {
    // 文章中的每条评论数据
    commentList: {
      type: [Array, Object],
      required: true,
    }
  },
  methods: {
   async UserComment() { },

   // 给文章评论点赞
  async clickFabulous() {
    // this.fabulousShow = !this.fabulousShow
    let commentNumber = 0 // 点赞时显示的加减状态
    commentNumber = this.commentList.like_count
    console.log(this.commentList.com_id);
    try {
      if (!this.commentList.is_liking) {
        const {data} = await postCommentLikings(this.commentList.com_id)
        this.fabulousShow = true
       console.log(data.message);
        commentNumber ++
      } else {
        const {data}  = await deleteArticleComment(this.commentList.com_id)
        this.fabulousShow = false
        console.log(data.message);
        commentNumber--
      }
      this.$emit('iconComment',this.fabulousShow)
    } catch(err) {
      this.$toast.fail('操作失败')
      this.fabulousShow = null
    }
    this.$emit('deleteComment', commentNumber)
  },

   // 点击文章评论回复时弹出评论回复框
  async seeReply () {
    this.replyShow = true
   
  }
  },
 
}
</script>

<style lang="scss" scoped>
  .comment-page {
    .commentArea {
     
     .commentInfo {
      line-height: 1;
       .van-image {
         width: 70px;
         height: 70px;
         margin-right: 14px;
       }
       .infoName {
         font-size: 25px;
         color: #666;
         vertical-align: top;
       }
     }
     .fabulous {
       .van-icon {
         font-size: 30px;
         vertical-align:middle;
         padding-bottom: 3px;
         margin-right: 5px;
       }
     }
     .textBox {
      margin-left: 70px;
      font-size: 35px;
      color: #000;
      .commentDate {
        font-size: 20px;
        color: #999;
        margin-top: 10px;
        .van-button {
         margin-left: 35px;
        }
      }
     }
   }
   .replyBox {
    .van-popup {
      height: 80%;
    }
   }
  }
</style>